<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>光伏电站</title> 
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Static/bootstrap-3.3.0-dist/dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Static/font-awesome-4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/Static/simple-line-icons-master/css/simple-line-icons.css" >
    <link type="image/x-icon" rel="shortcut icon" href="__PUBLIC__/images/favicon.ico">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/style/common/sidebar.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/style/common/menu.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/style/main.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/style/analysisView/analyData.css">
  </head>
  <body>
    
    <!-- 顶部菜单栏 -->
    <div id="top">
      <include file="Common/topbar" />
    </div>
    <include file="Common/tophidden" />
    <!-- 左侧菜单栏 -->
    <div id="left">
      <include file='Common/left' />
    </div>

    <div class="analysisView" id="right">
      <div class="container-fluid no-padding">

        <!-- 主内容标题栏 -->
        <div class="col-sm-12 overview-title">
          <div class="pull-left overview-title-font">
            <i class="fa fa-circle" style="color:#16da16; font-size: 10px;"></i>
            <span id="s_name"></span>
            <span style="cursor:pointer;color: #428bca; font-size: 13px;">[切换]</span>
            <span style="padding-left: 10px"><img src="__PUBLIC__/images/date.png">
              <span id="title-day" class="overview-title-time">日</span>
              <span id="title-month" class="overview-title-time title-time-active">月</span>
              <span id="title-year" class="overview-title-time">年</span>
              <span id="title-total" class="overview-title-time">累计</span>
            </span>
          </div>
        </div>

        <div id="main-content" class="col-sm-12">
          <!-- 添加自己内容 -->
          <div class="col-sm-12 panel">
            <div class="pull-right" style="margin: 10px 0;">
              <span class="m-r-xs">
                <i class="fa fa-circle m-r-xs" style="color:#c0504d"></i>
                故障
              </span>
              <span class="m-r-xs">
                <i class="fa fa-circle m-r-xs" style="color:#ffc700"></i>
                报警
              </span>
            </div>
            <!-- 模态框 -->
            <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
              <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title text-center">故障信息</h4>
                  </div>
                  <div class="modal-body">
                    <table class="table table-striped b-light">
                      <thead>
                        <tr>
                          <th class="text-center">开始时间</th>
                          <th class="text-center">结束时间</th>
                          <th class="text-center">故障类型</th>
                          <th class="text-center">状态</th>
                          <th class="text-center">功率</th>
                          <th class="text-center">发电量</th>
                          <th class="text-center">故障描述</th>
                        </tr>
                      </thead>
                      <tbody id="modal-tbody">
                        
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
            <div id="timesChart" style="width: 100%; height: 300px"></div>
          </div>
          <div class="col-sm-12 panel">
            <div class="pull-right" style="margin: 10px 0;">
              <span class="m-r-xs">
                <i class="fa fa-circle m-r-xs" style="color:#4879df"></i>
                逆变器
              </span>
              <span class="m-r-xs">
                <i class="fa fa-circle m-r-xs" style="color:#97c34b"></i>
                汇流箱
              </span>
              <span class="m-r-xs">
                <i class="fa fa-circle m-r-xs" style="color:#d583dc"></i>
                箱变
              </span>
            </div>
            <div id="faultTimesChart" style="width: 100%; height: 300px"></div>
          </div>
          <div class="col-sm-12 panel">
            <div class="pull-right" style="margin: 10px 0;">
              <span class="m-r-xs">
                <i class="fa fa-minus m-r-xs" style="color:#e06759"></i>
                故障率
              </span>
            </div>
            <div id="faultRateChart" style="width: 100%; height: 300px"></div>
          </div>
        </div>

      </div>
    </div>
    <script src="__PUBLIC__/Static/Jquery/jquery.min.js"></script>
    <script src="__PUBLIC__/Static/bootstrap-3.3.0-dist/dist/js/bootstrap.min.js"></script>
    <script src="__PUBLIC__/script/station/sidebar.js"></script>
    <script src="__PUBLIC__/script/station/header_public.js"></script>
    <script src="__PUBLIC__/Static/echarts/dist/echarts.js"></script>
    <script type="text/javascript">

      var trouble_times = [];
      var trouble = [];
      var warning_times = [];
      var warning = [];
      var days = [];

      $.ajax({
        type: "POST",
        url: "trouble_times",
        data: "",
        async:false,
        success:function(data){
            for(var val in data) {
              days.push(val);
              if (data[val].trouble == null) {
                trouble_times.push(0);
                trouble.push(null);
              } else {
                trouble_times.push(data[val].trouble.length);
                trouble.push(data[val].trouble);
              }
              if (data[val].warning == null) {
                warning_times.push(0);
                warning.push(null);
              } else {
                warning_times.push(data[val].warning.length);
                warning.push(data[val].warning);
              }              
            }
            
        }
      });


      //timesChart视图
      var timesChart = echarts.init(document.getElementById('timesChart'));
      var option = {
        tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'line',// 默认为直线，可选为：'line' | 'shadow'
            lineStyle: {
               color: '#c3c3c3',
            }
          }
        },
        grid: {
          left: 60,
          right: 60,
          top: 30,
          botton: 0,
        },
        xAxis: [
          {
            type: 'category',
            data: days,
            axisLine: {
              lineStyle: {
                color: '#C2C2C2'
              }
            },
            axisTick: [{
                show: 'false',
                alignWithLabel: 'true'
            }]
          },
        ],
        yAxis: {
          type: 'value',
          name: '台次',
          min: '0',
          axisLine: {
            lineStyle: {
              color: '#C2C2C2'
            }
          },
          axisTick: [{
            show: 'false',
            alignWithLabel: 'true'
          }],
          splitLine: {
            show: true,
            lineStyle: {
              color: '#C2C2C2',
              type: 'dashed',
            }
          },
        },
        series: [
          {
              name: '故障',
              type: 'bar',
              barWidth: '15px',
              data: trouble_times,
              itemStyle:{  
                normal:{color:'#c0504d'},
                //emphasis:{color:'#feb64c'}  
              }  
          },
          {
              name: '报警',
              type: 'bar',
              barWidth: '15px',
              barGap: '0',
              data: warning_times,
              itemStyle:{  
                normal:{color:'#ffc700'},  
              } 
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      timesChart.setOption(option);
      timesChart.on('click',function(params) {
        
        var td = '';
        for (var tro in trouble[params.dataIndex]) {
          var start_time = trouble[params.dataIndex][tro].start_time;
          var end_time = trouble[params.dataIndex][tro].end_time;
          var t_level = trouble[params.dataIndex][tro].t_level;
          var solve_state = trouble[params.dataIndex][tro].solve_state;
          var power = trouble[params.dataIndex][tro].power;
          var energy = trouble[params.dataIndex][tro].energy;
          var t_description = trouble[params.dataIndex][tro].t_description;
          td += '<tr><td class="text-center" style="color: #c0504d;">'+start_time+'</td>'+
                    '<td class="text-center" style="color: #c0504d;">'+end_time+'</td>'+
                    '<td class="text-center" style="color: #c0504d;">'+t_level+'</td>'+
                    '<td class="text-center" style="color: #c0504d;">'+solve_state+'</td>'+
                    '<td class="text-center" style="color: #c0504d;">'+power+'</td>'+
                    '<td class="text-center" style="color: #c0504d;">'+energy+'</td>'+
                    '<td class="text-center" style="color: #c0504d;">'+t_description+'</td></tr>';
        }
        for (var tro in warning[params.dataIndex]) {
          var start_time = warning[params.dataIndex][tro].start_time;
          var end_time = warning[params.dataIndex][tro].end_time;
          var t_level = warning[params.dataIndex][tro].t_level;
          var solve_state = warning[params.dataIndex][tro].solve_state;
          var power = warning[params.dataIndex][tro].power;
          var energy = warning[params.dataIndex][tro].energy;
          var t_description = warning[params.dataIndex][tro].t_description;
          td += '<tr><td class="text-center" style="color: #CD950C">'+start_time+'</td>'+
                    '<td class="text-center" style="color: #CD950C">'+end_time+'</td>'+
                    '<td class="text-center" style="color: #CD950C">'+t_level+'</td>'+
                    '<td class="text-center" style="color: #CD950C">'+solve_state+'</td>'+
                    '<td class="text-center" style="color: #CD950C">'+power+'</td>'+
                    '<td class="text-center" style="color: #CD950C">'+energy+'</td>'+
                    '<td class="text-center" style="color: #CD950C">'+t_description+'</td></tr>';
        }
        $("#modal-tbody").html(td);
        $('.modal').modal('show');
      });

      //faultTimesChart视图
      var faultTimesChart = echarts.init(document.getElementById('faultTimesChart'));
      var option = {
        tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'line',// 默认为直线，可选为：'line' | 'shadow'
            lineStyle: {
               color: '#c3c3c3',
            }
          }
        },
        grid: {
          left: 60,
          right: 60,
          top: 30,
          botton: 0,
        },
        xAxis: [
          {
            type: 'category',
            data: days,
            axisLine: {
              lineStyle: {
                color: '#C2C2C2'
              }
            },
            axisTick: [{
                show: 'false',
                alignWithLabel: 'true'
            }]
          },
        ],
        yAxis: {
          type: 'value',
          name: '故障台次',
          min: '0',
          axisLine: {
            lineStyle: {
              color: '#C2C2C2'
            }
          },
          axisTick: [{
            show: 'false',
            alignWithLabel: 'true'
          }],
          splitLine: {
            show: true,
            lineStyle: {
              color: '#C2C2C2',
              type: 'dashed',
            }
          },
        },
        series: [
          {
              name: '逆变器',
              type: 'bar',
              barWidth: '15px',
              data: trouble_times,
              itemStyle:{  
                normal:{color:'#4879df'},
                //emphasis:{color:'#feb64c'}  
              }  
          },
          {
              name: '汇流箱',
              type: 'bar',
              barWidth: '15px',
              barGap: '0',
              data: warning_times,
              itemStyle:{  
                normal:{color:'#97c34b'},  
              } 
          },
          {
              name: '箱变',
              type: 'bar',
              barWidth: '15px',
              data: trouble_times,
              itemStyle:{  
                normal:{color:'#d583dc'},  
              }
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      faultTimesChart.setOption(option);

      faultTimesChart.on('click',function(params) {
        
        var td = '';
        for (var tro in trouble[params.dataIndex]) {
          var start_time = trouble[params.dataIndex][tro].start_time;
          var end_time = trouble[params.dataIndex][tro].end_time;
          var t_level = trouble[params.dataIndex][tro].t_level;
          var solve_state = trouble[params.dataIndex][tro].solve_state;
          var power = trouble[params.dataIndex][tro].power;
          var energy = trouble[params.dataIndex][tro].energy;
          var t_description = trouble[params.dataIndex][tro].t_description;
          td += '<tr><td class="text-center" style="color: #4879df;">'+start_time+'</td>'+
                    '<td class="text-center" style="color: #4879df;">'+end_time+'</td>'+
                    '<td class="text-center" style="color: #4879df;">'+t_level+'</td>'+
                    '<td class="text-center" style="color: #4879df;">'+solve_state+'</td>'+
                    '<td class="text-center" style="color: #4879df;">'+power+'</td>'+
                    '<td class="text-center" style="color: #4879df;">'+energy+'</td>'+
                    '<td class="text-center" style="color: #4879df;">'+t_description+'</td></tr>';
        }
        for (var tro in warning[params.dataIndex]) {
          var start_time = warning[params.dataIndex][tro].start_time;
          var end_time = warning[params.dataIndex][tro].end_time;
          var t_level = warning[params.dataIndex][tro].t_level;
          var solve_state = warning[params.dataIndex][tro].solve_state;
          var power = warning[params.dataIndex][tro].power;
          var energy = warning[params.dataIndex][tro].energy;
          var t_description = warning[params.dataIndex][tro].t_description;
          td += '<tr><td class="text-center" style="color: #97c34b">'+start_time+'</td>'+
                    '<td class="text-center" style="color: #97c34b">'+end_time+'</td>'+
                    '<td class="text-center" style="color: #97c34b">'+t_level+'</td>'+
                    '<td class="text-center" style="color: #97c34b">'+solve_state+'</td>'+
                    '<td class="text-center" style="color: #97c34b">'+power+'</td>'+
                    '<td class="text-center" style="color: #97c34b">'+energy+'</td>'+
                    '<td class="text-center" style="color: #97c34b">'+t_description+'</td></tr>';
        }
        $("#modal-tbody").html(td);
        $('.modal').modal('show');
      });
      faultTimesChart.on('click',function(params) {
        $('.modal').modal('show');
      });

      //faultRateChart视图
      var trouble_rate = ['0','0.2','0.23','0.4','0.13','0.5','0.1','0.67','0.1','0.23','0.41','0.1',
                          '0.35','0.45','0.67','0.1','0.2','0.2','0.1','0.4','0.1','0.5']
      var faultRateChart = echarts.init(document.getElementById('faultRateChart'));
      var option = {
        tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'line',// 默认为直线，可选为：'line' | 'shadow'
            lineStyle: {
               color: '#c3c3c3',
            }
          }
        },
        grid: {
          left: 60,
          right: 60,
          top: 30,
          botton: 0,
        },
        xAxis: [
          {
            type: 'category',
            data: days,
            axisLine: {
              lineStyle: {
                color: '#C2C2C2'
              }
            },
            axisTick: [{
                show: 'false',
                alignWithLabel: 'true'
            }]
          },
        ],
        yAxis: {
          type: 'value',
          name: '次',
          min: '0',
          axisLine: {
            lineStyle: {
              color: '#C2C2C2'
            }
          },
          axisTick: [{
            show: 'false',
            alignWithLabel: 'true'
          }],
          splitLine: {
            show: true,
            lineStyle: {
              color: '#C2C2C2',
              type: 'dashed',
            }
          },
        },
        series: [
          {
              name: '故障率',
              type: 'line',
              data: trouble_rate,
              itemStyle:{  
                normal:{color:'#e06759'},
                //emphasis:{color:'#feb64c'}  
              }  
          },
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      faultRateChart.setOption(option);

      setTimeout(function (){
        window.onresize = function () {
            timesChart.resize();
            faultTimesChart.resize();
            faultRateChart.resize();
        }
      },200)
    </script>   
  </body>

</html>